<template>
  <div class="plugin-fiskaly-config">
    <div class="bg-box">
      <div class="title">1.{{ plugin.t('config.one.title') }}</div>
      <t-alert theme="info" :message="plugin.t('config.one.body')" style="margin-bottom: 30px">
        <template #close>
          <t-button :loading="loading" theme="primary" @click.stop="form.submit()">
            {{ plugin.t('config.update') }}
          </t-button>
        </template>
      </t-alert>
      <t-loading :loading="loading">
        <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onSubmit">
          <t-row :gutter="30">
            <t-col :span="6">
              <t-form-item :label="plugin.t('config.api_key')" name="api_key">
                <t-input v-model="formData.api_key" />
              </t-form-item>
              <t-form-item :label="plugin.t('config.api_secret')" name="api_secret">
                <t-input v-model="formData.api_secret" />
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-row :gutter="20">
                <t-col :span="6">
                  <t-form-item :label="plugin.t('config.series_print')" name="series.print">
                    <t-input v-model="formData.series.print" />
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item :label="plugin.t('config.series_print_refund')" name="series.print_refund">
                    <t-input v-model="formData.series.print_refund" />
                  </t-form-item>
                </t-col>
              </t-row>
              <t-row :gutter="20" style="margin-top: 24px">
                <t-col :span="6">
                  <t-form-item :label="plugin.t('config.series_ticket')" name="series.ticket">
                    <t-input v-model="formData.series.ticket" />
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item :label="plugin.t('config.series_ticket_refund')" name="series.ticket_refund">
                    <t-input v-model="formData.series.ticket_refund" />
                  </t-form-item>
                </t-col>
              </t-row>
            </t-col>
          </t-row>
        </t-form>
      </t-loading>
      <t-loading :loading="taxLoading">
        <div class="tax" v-if="tax">
          <div class="title">{{ plugin.t('config.tax') }}</div>
          <div class="item"><span>{{ tax.issuer.tax_number }}</span></div>
          <div class="item">{{ tax.territory }}</div>
          <div class="item">{{ tax.issuer.legal_name }}</div>
        </div>
      </t-loading>
    </div>
    <t-row :gutter="20">
      <t-col :span="6">
        <Signer/>
      </t-col>
      <t-col :span="6">
        <Client/>
      </t-col>
    </t-row>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import fiskalyStore from '../../store'
  import Signer from './signer.vue'
  import Client from './client.vue'

  const plugin = index.plugin

  const tax = fiskalyStore.tax
  const taxLoading = fiskalyStore.taxLoading
  const form = ref()
  const formData = ref({
    series: {}
  })
  const formRule = {
    api_key: [{ required: true, message: ' ', type: 'error' }],
    api_secret: [{ required: true, message: ' ', type: 'error' }],
    'series.print': [{ required: true, message: ' ', type: 'error' }],
    'series.print_refund': [{ required: true, message: ' ', type: 'error' }],
    'series.ticket': [{ required: true, message: ' ', type: 'error' }],
    'series.ticket_refund': [{ required: true, message: ' ', type: 'error' }],
  }

  // 加载配置
  const loading = ref(false)
  const getData = () => {
    loading.value = true
    fiskalyStore.get().then(res => {
      formData.value = res
      fiskalyStore.getTax().then(() => {
        fiskalyStore.getSigner()
        fiskalyStore.getClient()
      })
    }).finally(() => {
      loading.value = false
    })
  }

  // 更新配置
  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      fiskalyStore.update(formData.value).then(res => {
        getData()
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }
  
  getData()
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-fiskaly-config{
    .tax{
      background-color: $color-bg;
      border-radius: 5px;
      padding: 20px;
      margin-top: 25px;

      .item{
        padding-bottom: 5px;
        color: $color-content;
        font-size: 14px;

        span{
          color: $color;
        }
      }
    }
  }
</style>